<template>
  <div class="employees">
    <el-card>
      <pageTools>
        <template #left>
          <el-tag>共{{ total }}条记录</el-tag>
        </template>
        <template #right>
          <el-button
            v-permissions="'11'"
            size="mini"
            type="danger"
            @click="handleDownload"
          >普通excel导出</el-button>
          <el-button
            size="mini"
            type="success"
            @click="$router.push(`/import?type=user`)"
          >excel导入</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="addUser"
          >新增员工</el-button>
        </template>
      </pageTools>
    </el-card>
    <!-- 表格 -->
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column
        type="index"
        :index="pageData.page > 1 ? (pageData.page - 1) * pageData.size + 1 : 1"
        label="序号"
      />
      <el-table-column prop="username" label="姓名" sortable />
      <el-table-column align="center" label="头像">
        <template slot-scope="scope">
          <img
            v-imgError="defaultImg"
            style="width: 30px"
            :src="scope.row.staffPhoto || defaultImg"
            alt=""
          >
        </template>
      </el-table-column>
      <el-table-column prop="mobile" sortable label="手机号" />
      <el-table-column prop="workNumber" label="工号" sortable />
      <el-table-column prop="formOfEmployment" label="聘用形式" sortable>
        <template slot-scope="scope">
          {{ isPositive(scope.row.formOfEmployment) }}
        </template>
      </el-table-column>
      <el-table-column prop="departmentName" label="部门" sortable />
      <el-table-column label="入职时间" sortable>
        <template slot-scope="scope">
          {{ nweDay(scope.row.correctionTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" sortable width="300">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >查看</el-button>
          <el-button type="text" size="small">转正</el-button>
          <el-button type="text" size="small">调岗</el-button>
          <el-button type="text" size="small">离职</el-button>
          <el-button type="text" size="small" @click="setRole(scope.row.id)">角色</el-button>
          <el-button
            type="text"
            size="small"
            @click="delUserList(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex">
      <div />
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.size"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="dialogTableVisible">
      <Dialog
        v-if="dialogTableVisible"
        :dialog-table-visible.sync="dialogTableVisible"
        @sucess="sucess"
      />
    </el-dialog>

    <!-- 角色对话框 -->
    <el-dialog title="分配角色" :visible.sync="dialogTableVisible1">
      <RoleDialog
        v-if="dialogTableVisible1"
        ref="RoleDialog"
        :dialog-table-visible1.sync="dialogTableVisible1"
      />
    </el-dialog>
  </div>
</template>

<script>
import Dialog from './dialog.vue'
import RoleDialog from './roleDialog.vue'

import { getUserList, delUserList } from '@/api/employees'
import userObj from '@/constant/employees'

import defaultImg from '@/assets/common/bigUserHeader.png'

export default {
  name: '',
  components: {
    Dialog,
    RoleDialog
  },
  data() {
    return {
      defaultImg,
      tableData: [],
      pageData: {
        page: 1,
        size: 10
      },
      total: 0,
      dialogTableVisible: false,
      dialogTableVisible1: false
    }
  },
  computed: {},

  created() {
    this.getUserList()
  },

  methods: {
    // 获取员工列表
    async getUserList() {
      const res = await getUserList(this.pageData)
      if (res.code === 10000) {
        const { data } = res
        this.tableData = data.rows
        this.total = data.total
      }
    },

    // 查看
    handleClick(row) {
      // this.$router.push('/employees/details/' + row.id)
      this.$router.push({ name: 'details', params: { id: row.id }})
    },

    // 新增员工
    addUser() {
      this.dialogTableVisible = true
    },

    // 新增员工成功
    sucess() {
      this.dialogTableVisible = false
      this.getUserList()
    },
    // 删除员工
    async delUserList(id) {
      const res = await this.$confirm(
        '此操作将永久该员工！, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (res === 'confirm') {
        const resolve = await delUserList(id)
        if (resolve.code === 10000) {
          this.$message.success('删除成功！')
          this.getUserList()
        }
      }
    },

    // 转正和非转正
    isPositive(val) {
      // eslint-disable-next-line eqeqeq
      const obj = userObj.hireType.find((item) => item.id == val)
      return obj ? obj.value : '错误数据'
    },

    // 分页的条
    handleSizeChange(val) {
      this.pageData.size = val
      this.getUserList()
    },
    // 分页的页
    handleCurrentChange(val) {
      this.pageData.page = val
      this.getUserList()
    },

    // 格式化时间
    nweDay(day) {
      const newday = day ? day.split('T')[0] : '无数据'
      return newday
    },

    // 导出
    handleDownload() {
      import('@/vendor/Export2Excel').then((excel) => {
        // 数据
        const map = {
          id: '编号',
          password: '密码',
          mobile: '手机号',
          username: '姓名',
          timeOfEntry: '入职日期',
          formOfEmployment: '聘用形式',
          correctionTime: '转正日期',
          workNumber: '工号',
          departmentName: '部门',
          staffPhoto: '头像地址'
        }
        const tHeader = Object.values(map)
        const list = this.tableData
        const data = this.formatJson(list, map)
        console.log(data)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'userInfo',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    // 处理导出需要的数据
    formatJson(jsonData, map) {
      const keyArr = Object.keys(map)
      return jsonData.map((item) => {
        const newObj = {}
        keyArr.forEach((key) => {
          newObj[map[key]] = item[key]
        })
        return Object.values(newObj)
      })
    },

    // 角色
    setRole(id) {
      this.dialogTableVisible1 = true
      this.$nextTick(() => {
        this.$refs.RoleDialog.id = id
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
}

.el-card {
  margin-bottom: 10px;
}

.flex {
  display: flex;
  justify-content: space-between;
}
</style>
